<template>
  <div class="app-container userInfo">
    <el-card class="box-card" shadow="hover">
      <div class="heads">
        <el-avatar :size="50" :src="circleUrl" />
        <span>{{ userStore.nickname }}</span>
      </div>
      <div>
        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="个人资料" name="userInfo">
            <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="120px"
              class="demo-ruleForm"
              size="default"
              label-position="top"
              status-icon
            >
              <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" disabled />
              </el-form-item>
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="ruleForm.nickname" />
              </el-form-item>
              <el-form-item label="联系方式" prop="phone">
                <el-input v-model="ruleForm.phone" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)"> 保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="密码修改" name="password">
            <el-form
              ref="passwordFormRef"
              :model="passwordForm"
              :rules="passwordRules"
              label-width="120px"
              class="ruleForm"
              size="default"
              label-position="top"
              status-icon
            >
              <el-form-item label="原密码" prop="password">
                <el-input v-model="passwordForm.password" type="password" />
              </el-form-item>
              <el-form-item label="新密码" prop="new_password">
                <el-input v-model="passwordForm.new_password" type="password" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm_password()"> 保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    <el-card class="box-card" shadow="hover">
      <div v-for="o in 4" :key="o" class="text item">{{ "List item " + o }}</div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue"
import { type TabsPaneContext, type FormInstance, type FormRules, ElMessage } from "element-plus"
import { useUserStore } from "@/store/modules/user"
import { getUserInfoApi } from "@/api/login"
import { adminEditPasswordApi, updateAdminEditApi } from "@/api/system"
const userStore = useUserStore()

interface RuleForm {
  id: string
  nickname: string
  phone: string
  username: string
  status: number
  role_ids: number
}

interface passwordFormInter {
  password: string
  new_password: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  id: "",
  nickname: "",
  role_ids: 0,
  status: 0,
  phone: "",
  username: ""
})

const passwordForm = reactive<passwordFormInter>({
  password: "",
  new_password: ""
})

const rules = reactive<FormRules<RuleForm>>({
  username: [{ required: true, message: "请输入", trigger: "blur" }],
  nickname: [{ required: true, message: "请修改昵称", trigger: "blur" }],
  phone: [{ required: true, message: "请输入联系方式", trigger: "blur" }]
})
const passwordRules = reactive<FormRules<passwordFormInter>>({
  password: [{ required: true, message: "请输入", trigger: "blur" }],
  new_password: [{ required: true, message: "请输入", trigger: "blur" }]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      updateAdminEditApi({
        id: ruleForm.id,
        username: ruleForm.username,
        nickname: ruleForm.nickname,
        status: ruleForm.status,
        role_ids: ruleForm.role_ids,
        phone: ruleForm.phone
      })
      ElMessage.success("修改成功")
    } else {
      console.log("error submit!", fields)
    }
  })
}
const passwordFormRef = ref<FormInstance | null>(null)
const submitForm_password = async () => {
  console.log("submit!")
  await passwordFormRef.value?.validate((valid, fields) => {
    if (valid) {
      adminEditPasswordApi({
        id: ruleForm.id,
        password: passwordForm.password,
        new_password: passwordForm.new_password
      })
      ElMessage.success("修改成功")
    } else {
      console.log("error submit!", fields)
    }
  })
}

// const resetForm = (formEl: FormInstance | undefined) => {
//   if (!formEl) return
//   formEl.resetFields()
// }

const activeName = ref("userInfo")

const state = reactive({
  circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
  squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
  sizeList: ["small", "", "large"] as const
})

const { circleUrl } = toRefs(state)

defineOptions({
  // 命名当前组件
  name: "UserInfo"
})

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const getDetails = async () => {
  const { data } = await getUserInfoApi()
  ruleForm.username = data.username
  ruleForm.nickname = data.nickname
  ruleForm.role_ids = data.role_ids
  ruleForm.status = data.status
  ruleForm.phone = data.phone
  ruleForm.id = data.id
}
getDetails()
</script>

<style lang="scss" scoped>
.userInfo {
  display: flex;
  justify-content: space-between;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: calc(50% - 10px);
}

.heads {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.heads span {
  margin-top: 10px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
